<template>
  <var-app-bar
    :title="title"
    title-position="center"
    class="z-999"
    color="#12B7ED"
    v-if="isHome"
    :class="route.name === 'user' ? '!shadow-none' : ''"
  >
    <template #left>
      <template v-if="isHome">
        <var-button round text color="transparent" text-color="#fff" @click="goBack">
          <var-icon name="chevron-left" size="7vw" />
        </var-button>
      </template>
    </template>
  </var-app-bar>
</template>

<script setup lang="ts">
  import router from '@/router';

  let title = ref('首页');
  let isHome = ref(false);
  const goBack = () => {
    router.back();
  };
  const route = useRoute();
  watch(
    () => route.name,
    () => {
      title.value = route.meta.title as string;
      if (route.name !== 'home' && route.name !== 'exam' && route.name !== 'startExam') {
        isHome.value = true;
      } else {
        isHome.value = false;
      }
    },
    {
      immediate: true,
    }
  );
</script>

<style scoped>
  :deep(.var-app-bar__title) {
    @apply !text-[4vw];
  }
</style>
